<template>
  <div class="backgroud">
    <div class="main-container">
      <h2>个人中心</h2>
      <div class="user-info">
        <div class="show-basic-infos">
          <div class="avatar">
            <el-avatar :size="100" :src="userinfo.avatar"></el-avatar>
          </div>
          <div class="basic-info">
            <h2>
              {{ userinfo.username }}
            </h2>
            <div class="email">
              {{ userinfo.userEmail }}
            </div>
          </div>
        </div>
        <div class="infos-container">
          <h2>账户</h2>
          <div class="infos flex-1">
            <div class="info">
              <h3>用户名</h3>
              <div v-if="isEdit.basic === false" class="info-content">
                {{ userinfo.username }}
              </div>
              <el-input
                v-else
                v-model="editInfo.username"
                class="info-content"
              ></el-input>
            </div>
          </div>
          <div class="infos flex-1">
            <div class="info">
              <h3>密码</h3>
              <el-button class="change-password-btn" type="text" @click="dialogVisible = true">
                更改密码
              </el-button>
            </div>
          </div>
          <div class="edit">
            <el-button
              v-if="isEdit.basic === false"
              type="primary"
              size="medium"
              plain
            >
              编辑
            </el-button>
            <el-button v-else type="primary" size="medium">完成</el-button>
          </div>
        </div>
        <div class="infos-container">
          <h2>用户<br>信息</h2>
          <div class="infos flex-1">
            <div class="info">
              <h3>省</h3>
              <div class="info-content">江苏省</div>
            </div>
            <div class="info">
              <h3>市</h3>
              <div class="info-content">南京市</div>
            </div>
            <div class="info">
              <h3>区</h3>
              <div class="info-content">鼓楼区</div>
            </div>
          </div>
          <div class="infos flex-1">
            <div class="info">
              <h3>学校</h3>
              <div v-if="isEdit.region === false" class="info-content">
                {{ userinfo.school }}
              </div>
              <el-input
                v-else
                v-model="editInfo.username"
                class="info-content"
              ></el-input>
            </div>
            <div class="info">
              <h3>学段: {{ userinfo.period }}</h3>
              <h3 style="margin-top: 6%;">年级: {{ userinfo.grade }}</h3>
            </div>
            <div class="info" v-if="isshow">
              <h3>学科: {{ userinfo.subject}}</h3>
            </div>
          </div>
          <div class="edit">
            <el-button
              v-if="isEdit.region === false"
              type="primary"
              size="medium"
              plain
            >
              编辑
            </el-button>
            <el-button v-else type="primary" size="medium">完成</el-button>
          </div>
        </div>
      </div>
    </div>
    <!--修改密码弹窗-->
    <el-dialog
      :visible.sync="dialogVisible "
      title="更改密码"
      width="30%">
      <el-form ref="form" :model="form" :rules="rules" class="user-account-key" label-width="80px">
        <el-form-item label="原密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" type="password" placeholder="请设置新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newPassword2">
          <el-input v-model="form.newPassword2" type="password" placeholder="请确认新密码"></el-input>
        </el-form-item>

        <el-form-item class="btn">
          <el-button type="primary" @click="onSubmit('form')">保存</el-button>
          <el-button @click="$refs['form'].resetFields()">重置</el-button>
        </el-form-item>

      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import { updatePassword } from '@/api/user'
export default {
  name: 'User',
  data() {
    // eslint-disable-next-line no-unused-vars
    const validateNewPassword = (rule, value, callback) => {
      if (value === this.form.password) {
        callback(new Error('新密码不能与原密码相同!'))
      } else if (!/^(?=.*[a-zA-Z])(?=.*\d)[^]{8,18}$/.test(value) || value === '') {
        callback(new Error('密码不能为空且密码需要8-18位，且需要包含数字和字母'))
      } else {
        callback()
      }
    }
    // eslint-disable-next-line no-unused-vars
    const validateNewPassword2 = (rule, value, callback) => {
      if (value !== this.form.newPassword) {
        callback(new Error('与新密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      isEdit: {
        basic: false,
        region: false
      },
      username: '',
      userEmail: '',
      school: '',
      period: '',
      grade: '',
      isshow: false,

      userinfo: JSON.parse(window.localStorage.getItem('user')),
      editInfo: {
        username: 'NOBUG'
      },
      dialogVisible: false,
      form: {
        password: '',
        newPassword: '',
        newPassword2: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请设置新密码', trigger: 'blur' },
          { validator: validateNewPassword, trigger: 'blur' }
        ],
        newPassword2: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: validateNewPassword2, trigger: 'blur' }
        ]
      }

    }
  },
  mounted() {
    // console.log(this.userinfo)
    if(this.userinfo.userType === 1){this.isshow = true}
    else{this.isshow = false}
  },
  /*
  created() {
    this.getUserInfo()
  },
  */
  methods: {
    /*
    getUserInfo() {
      // const { userinfo } = JSON.parse(window.localStorage.getItem('user'))
      console.log(JSON.parse(window.localStorage.getItem('user')))
    },
    */
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const { newPassword, password } = this.form
          updatePassword({ newPassword, password }).then(() => {
            this.$message.success('密码修改成功，正在跳转页面')
            // console.log(password)
            this.$router.push('/login').catch(err => { err })
          })
        } else {
          this.$message.error('请正确填写表单')
          return false
        }
      })
    }

  }

}
</script>

<style scoped>
.backgroud {
  padding-top: 1.5rem;
  background-color: #f4f5f7;
  /*空出nav-menu的位置*/
  min-height: calc(100vh - 70px);
}

.main-container {
  max-width: 960px;
  margin: 0 auto;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border: 1px solid #dcdfe6;
  width: 60%;
  min-width: 1000px;
  height: 100%;
  background-color: #fff;
  padding: 2rem;
}

.main-container h2 {
  font-size: 2rem;
}

.user-info {
  margin-top: 1rem;
}

.show-basic-infos {
  display: flex;
}

.show-basic-infos .basic-info {
  margin-left: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.show-basic-infos .basic-info h2 {
  font-size: 3rem;
}

.show-basic-infos .basic-info .email {
  font-size: 1.5rem;
}

.show-basic-infos,
.infos-container {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid #dcdfe6;
}

.infos-container {
  display: flex;
  flex-wrap: wrap;
}

.infos-container h2 {
  font-size: 2rem;
  color: #515151;
  font-weight: 400;
}

.infos-container .infos {
  margin-left: 5.5rem;
}

.infos-container .infos .info h3 {
  font-size: 1.2rem;
  color: #666;
}

.infos-container .infos .info .info-content {
  margin-top: 0.5rem;
  font-size: 1.2rem;
}

.change-password-btn {
  font-size: 1.2rem;
}

.infos-container .infos .info {
  margin-bottom: 1.5rem;
}

.edit-input {
  font-size: 1.2rem;
}

</style>
